<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">

        <h1>{{datetime | dtf}}</h1>
        <h1>{{name | ucase}}</h1>
        <h1>{{name2 | ucase}}</h1>

    </div>
    <script>
        console.log(new Date())
    </script>
    <script>
        //全局过滤器
        /*
        参数1：过滤器名字，参数2：过滤器需要执行的过滤操作方法,操作方
        法有参数value，value就是需要过滤的变量的数据。
        name | dtf
        MYSQL存储日期的字符串：类型：char(19)19位 ,保证显示2位，例如
        8 应该显示08
        */
        /*Vue.filter('dtf', function(value) {
            //value就是需要过滤的日期对象。需要设定新的日期格式：yyyy-MM-dd 00:00:00
            var y = value.getFullYear()
            var M = (value.getMonth() + 1).toString().padStart(2,
                '0')
            var d = value.getDate().toString().padStart(2, '0')
            var h = value.getHours().toString().padStart(2, '0')
            var m = value.getMinutes().toString().padStart(2, '0')
            var s = value.getSeconds().toString().padStart(2, '0')
                //按照yyyy-MM-dd 00:00:00 格式拼接起来。
                //ES6 拼接字符串
                //return `${y}年${M}月${d}日 ${h}:${m}:${s}`
            return `${y}-${M}-${d} ${h}:${m}:${s}`
        })*/
        var vm = new Vue({
            el: '#app',
            data: {
                //定义属性，存储当前日期
                name: 'china',
                datetime: new Date(),
                name2: 'usa',
            },
            filters: {
                //定义私有的过滤器，可以定义多个
                dtf: function(value) {
                    var y = value.getFullYear()
                    var M = (value.getMonth() +
                        1).toString().padStart(2, '0')
                    var d = value.getDate().toString().padStart(2,
                        '0')
                    var h = value.getHours().toString().padStart(2,
                        '0')
                    var m = value.getMinutes().toString().padStart(2,
                        '0')
                    var s = value.getSeconds().toString().padStart(2,
                            '0')
                        //按照yyyy-MM-dd 00:00:00 格式拼接起来。
                        //ES6 拼接字符串
                        //return `${y}年${M}月${d}日 ${h}:${m}:${s}`
                    return `${y}-${M}-${d} ${h}:${m}:${s}`
                },
                //小写转换为大写的过滤器
                ucase: function(value) {
                    //value就是需要过滤的字母
                    return value.toUpperCase() //调用


                }
            },
        })
    </script>
</body>

</html>